// 详情

import { useRequest } from 'ahooks';
import React from 'react'
import { useParams } from 'react-router-dom'
import { getListDetail } from '../../../api/home';
import { NoSubstitutionTemplateLiteral } from 'typescript';
import { WdHeader } from '../../../components';

export interface DetailDataState {
  content: string
  id: number
  releaseTime: number
  source: string
  title: string
  whetherCollection: number
}

const Index: React.FC = () => {
  const params = useParams();
  const id = params.id as string
  const { data: detailData = {} as DetailDataState } = useRequest(async () => {
    const resp = await getListDetail(+id);
    const detail = resp.data.result
    // 查找字符串中的所有 img 设置宽度
    detail.content = detail.content.replace(/<img /g, '<img width="100%" ')
    return detail as DetailDataState
  })
  return (
    <div>
      <WdHeader mode='black'></WdHeader>
      <div style={{ padding: 10 }} dangerouslySetInnerHTML={{ __html: detailData.content }}></div>
    </div>
  )
}
export default Index